<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2023/4/29
  Time: 23:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery.js" ></script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
        <li><a href="#">表单</a></li>
    </ul>
</div>

<div class="formbody">

    <div class="formtitle"><span>基本信息</span></div>
    <form action="/userServlet" method="post" id="From">
        <ul class="forminfo">
            <input type="hidden" id="name" name="type" value="save">
<%--      更新所用      --%>
            <c:if test="${not empty user}">
                <input type="hidden" value="${user.id}" name="id">
            </c:if>
            <li>
                <label>账&nbsp;号</label>
                <input name="userName" type="text" id="userName" class="dfinput" value="${user.username}" />
                <i id="userNameI">标题不能超过30个字符</i>
            </li>
            <li>
                <label>密&nbsp;码</label>
                <input name="password" type="text" class="dfinput" value="${user.password}" />
                <i>多个关键字用,隔开</i>
            </li>
            <li>
                <label>手机号码</label>
                <input name="phoneNum" type="text" class="dfinput" value="${user.phoneNum}" />
                <i>多个关键字用,隔开</i>
            </li>
            <li>
                <label>邮&nbsp;箱</label>
                <input name="email" type="text" class="dfinput" value="${user.email}" />
                <i>多个关键字用,隔开</i>
            </li>
            <li>
                <label>&nbsp;</label>
                <input name="" type="button" id="btn" class="btn" value="确认保存"/>
            </li>
        </ul>
    </form>

</div>
<%--  换表单提交方式为jquery  --%>
<script type="application/javascript">
    var flag = true;
    $(function (){
        //blur：当元素失去焦点时触发 blur 事件
        $("#userName").blur(function (){
            // 弹窗检验是否能拿到输入的值
            // alert($(this).val())
        //    把录入的账号通过Ajax的方式提交到后端，校验该账号是否存在
            var userName = $(this).val();
            $.get("/userServlet?type=check&userName=" + userName, function (data){
                // alert(data);
                // console.log(data);  // 获取data信息并显示在网页控制台中，可以发现
                if (data.trim() == 'success') {
                //    账号可用
                    flag = true;
                    $("#userNameI").html("<span style='color: green'>账号不存在，可以使用</span>")
                } else {
                //    账号不可用
                    flag = false;
                    $("#userNameI").html("<span style='color: red'>账号已经存在，请更换</span>")
                }
            })
        })
        $("#btn").click(function (){
            if (flag == false) {
                alert("账号已存在，请更换后再提交");
            } else {
                $("#From").submit();
            }
        })
    })
</script>


<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>